1. 同源和跨域
//#region 
1.1 同源: (同源策略)
是浏览器的一个安全策略
规定了: 发送ajax请求的html的url地址中协议,域名,端口号和发送ajax请求的目标url地址的协议,域名,端口号,都必须一致.才认为这次请求是安全的.才能真正的发送ajax请求. 如果有一个不一样,则认为这次请求不安全,不会真正的发送ajax请求

html: http://localhost:5000/xxx.html 

ajax: 
    1. https://localhost:5000/test  不同源
    2. http://127.0.0.1:5000/test  不同源 
    3. http://localhost:5500/test 不同源
    3. http://localhost:5000/test 同源

同源除了限制ajax还限制了什么?

cookie localStorage

1.2 跨域

给不同源的地址发送ajax请求就是跨域

解决跨域问题: 

    1. jsonp （只支持get请求），但是没有兼容性问题
    
        jsonp原理: 利用script标签不受同源策略的限制,发送请求 

        实际开发操作方式:

            1. 什么时候需要发送请求,就动态创建script标签
            2. 给script添加src属性.值就是请求的目标地址
            3. 将script添加到dom树上,浏览器会解析新增script,从而发送请求
            4. 全局定义接收响应数据的函数
            5. 设置src时,把函数名上传给服务器
                script.src = "http....../test?callback=函数名"
                服务器要做的事件: 
                    const {callback} = req.query 
                    res.send(`${callback}(数据)`)
            6. 当服务器响应之后,我们定义的接收响应数据的函数就会被调用.函数的形参可以接收到响应的数据

    2. cors 跨域资源共享 (ie10+才支持的功能)

        cors get和post都支持 
        也需要后端配合

    3. 代理(工程化项目阶段)
    //#endregion

2. ajax2.0 

2.1 formdata使用

    const formdata = new FormData(form真实dom/undefined)
      注意: 
        1. 如果实例化formdata的时候,传入一个form表单的真实dom.那么表单中所有的有name属性的表单项的值就自动添加到了formdata中
        2. 如果实力化formdata的时候,没有传入form表单的真实dom.那么formdata中则没有任何数据

    查看formdata中的数据: 
        注意: 不要直接打印formdata.这样是看不到任何数据的
        应该使用formdata.get('键') 返回值就是表单项的值
    
    往formdata中添加数据
        formdata.append('键', 值)

    formdata配合ajax使用的注意点: 

        1. 使用formdata,只能选择post请求方式
        2. 使用formdata,无需开发者手动定义请求头中content-type的值
           浏览器会自动添加请求头中content-type: multipart/form-data
        3. 将formdata实例作为请求主体的数据即可: xhr.send(formdata)

    服务器中使用express-formidable第三方中间件处理formdata数据

    
    
    